Updated at 2021.6.7

Blazor and Data Edit

다양한 데이터 타입이 결합된 모델, 특히 배열과 같은 다량의 데이터를 열거하고 편집할 필요있을 때 그것을 Blazor에서 다루는 방법에 대해 알아 보자.

예제로 집에 있는 가구들에 대한 데이터 처리를 해보자.

데이터 모델

다음과 같은 데이터 모델을 만들 수 있을 것이다. 집에는 많은 가구들이 있으므로 House 클래스는 Furniture 클래스의 리스트를 포함한다.

class House {
  public string Name { get; set; }
  public List<Furniture> FurnitureList { get; set; }
}

class Furniture {
  public string Name { get; set; }
  public DateTime DateOfManufacture { get; set; }
  public double Price { get; set; }
}

Razor 컴포넌트

이제 House 데이터를 보여주고 편집하는 기능을 구현해보자. (참고로 여기서는 W3.CSS 를 활용하였다.)

• House 객체가 null이 아니면 내용을 보여주고 편집할 수 있게 한다.
• Furniture 리스트는 foreach을 활용하여 테이블 형태로 보여준다.
• 테이블의 마지막 행은 지우기 버튼이 들어가게 하여 각 열에 지정된 Furniture 데이터를 지울 수 있게 한다.
• Furniture 리스트 테이블의 각 행을 선택(클릭)하면 selectedFurniture에 그 행의 Furniture 데이터가 지정되게 한다. (나중에 만들 FurnitureEdit 컴포넌트에서 편집하게 할 것임.)

HouseEdit.razor

<h1>House View and Edit</h1>
@if (house != null)
{
    <p>
        <label>Name</label>
        <input class="w3-input" @bind-value="@house.Name" />
    </p>

    <div class="w3-responsive">
        <table class="w3-table-all">
            <thead>
                <tr class="w3-green">
                    <th>Name</th>
                    <th>Date Of Manufacture</th>
                    <th class="w3-right-align">Price</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var furniture in house.FurnitureList)
                {
                    <tr @onclick="@(() => selectedFurniture = furniture)">
                        <td>@furniture.Name</td>
                        <td>@furniture.DateOfManufacture.ToShortDateString()</td>
                        <td class="w3-right-align">@furniture.Price</td>
                        <td class="w3-right-align"><button @onclick="@(() => OnDelete(furniture))">Del</button></td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

    @if (selectedFurniture != null)
    {
        <FurnitureEdit @bind-Item="selectedFurniture" />
    }
}

@code {
    private House house;

    private Furniture selectedFurniture;

    protected override void OnInitialized()
    {
        house = new()
        {
            Name = "Castle",
            FurnitureList = new()
            {
                    new Furniture() { Name = "Table", Price = 1000, DateOfManufacture = DateTime.Now },
                    new Furniture() { Name = "Chair", Price = 500, DateOfManufacture = DateTime.MinValue },
                }
        };
    }

    private void OnDelete(Furniture furniture)
    {
        house.FurnitureList.Remove(furniture);
    }
}

FurnitureEdit.razor

• Blazor에서 제공하는 기본 사용자 입력 컴포넌트를 사용하여 입력창을 만든다.
  • EditForm, InputText, InputDate, InputNumber
• 파라미터로 입력된 Item의 내용을 바로 변경하기 보다는 item이라는 프라이빗 변수를 만들어서 사용하다.
  • 파라미터 변수의 get, set 함수에서 item을 초기화 한다.
• 이벤트 콜백 함수를 만들어서 submit시에 그 함수가 실행되도록 한다. 함수명은 파라미터 변수명에 Changed를 붙여서 만든다.

<div>
    <h4>Edit Details</h4>
    <EditForm class="w3-container" Model="item" OnSubmit="@HandleSubmit">
        <div>
            <p>
                <label>Name</label>
                <InputText class="w3-input" @bind-Value="item.Name" />
            </p>
            <p>
                <label>Date Of Manufacture</label>
                <InputDate class="w3-input" @bind-Value="item.DateOfManufacture" />
            </p>
            <p>
                <label>Price</label>
                <InputNumber class="w3-input" @bind-Value="item.Price" />
            </p>
            <p>
                <Button class="w3-button w3-green" type="submit">Update</Button>
            </p>
        </div>
    </EditForm>
</div>

@code {
    [Parameter]
    public Furniture Item
    {
        get { return item; }
        set { item = value; }
    }

    private Furniture item;

    [Parameter]
    public EventCallback<Furniture> ItemChanged { get; set; }

    private async Task HandleSubmit()
    {
        await ItemChanged.InvokeAsync(item);
    }
}

최종적으로 완성된 실행된 화면은 아래와 같을 것이다.

Most Popular #3

Recent #3